<template>
	<uni-shadow-root>
		<view class="title-wrap solid-bottom">
			<!-- <view v-else>
				<text>输入直播名称 0/</text><text style="color:#07c160">10</text>
			</view> -->
			<view class="input-wrap">
				<input placeholder="输入直播名称" placeholder-class="text-title" maxlength="10" v-model="ruleForm.title"/>
				<view>
					<text>{{ruleForm.title.length}}/</text><text style="color:#07c160">10</text>
				</view>
			</view>
		</view>
		<view class="title-wrap">
			<view>
				<h-date-picker @confirm="handleStartDate">
					<text>{{startDate}}</text>
					<!-- <text v-else>开始直播时间</text> -->
				</h-date-picker>
			</view>
		</view>
		<view class="title-wrap">
			<view class="flex">
				<view class="title" style="margin-right: 10rpx;">直播时长</view>
				<h-picker :model.sync="live_times" :label.sync="live_times_label" :options="timeOptions">
					<text>{{live_times_label}}</text>
				</h-picker>
			</view>
		</view>
		<view class="live-wrap">
			<view class="live-cont">
				<view class="cover-cont" v-if="ruleForm.img">
					<image :src="live_src" class="live-img" mode="aspectFit" />
				</view>
				<view class="cover-cont" @click="chooseImg" v-else>
					<image src="/static/images/publish/start-live.png" class="upload-img" />
					<view class="margin-top-sm">
						<text>上传直播封面</text>
					</view>
				</view>
			</view>
			<view class="btn-wrap margin-top-sm">
				<button class="cu-btn round bg-red" @click="handlePublish">提交审核</button>
			</view>
		</view>
	</uni-shadow-root>
</template>

<script>
	import HPicker from "@/components/HPicker"
	import HDatePicker from "@/components/HDatePicker"
	export default {
		data() {
			return {
				ruleForm: {
					title: "",
					img: "",
					live_times: ""
				},
				rules:{
					title:[
						{msg:'标题不能为空',required:true}
					],
					img:[
						{msg:'封面不能为空',required:true}
					]
				},
				live_src: "",
				startDate: "",
				live_times:"",
				live_times_label:"30分钟",
				timeOptions:[
					{label:'30分钟',value:"30"},
					{label:'1小时',value:"1" },
					{label:'2小时',value:"2"},
					{label:'3小时',value:"3" },
					{label:'4小时',value:"4"},
					{label:'5小时',value:"5" },
					{label:'6小时',value:"6"},
					{label:'7小时',value:"7" },
					{label:'8小时',value:"8"}
				]
			}
		},
		components: {
			HPicker,
			HDatePicker
		},
		methods: {
			handleStartDate(date) {
				this.startDate = date?date:this.startDate
			},
			handleEndDate(date) {
				this.endDate = date
			},
			async chooseImg() {
				this.live_src = await this.$h.lib.chooseImage()
				let query = {
					img_type: 'avatar'
				}
				let {
					code,
					data
				} = await this.$h.uploadFile('image', this.live_src, query)
				if (code === 1) {
					this.$h.toast('上传成功', true).then(() => {
						this.ruleForm.img = data.src
					})
				} else {
					this.$h.toast('上传失败')
				}
			},
			//校验时间是否准确
			validateTime() {
				return new Promise(resolve => {
					let errMsg = ""
					if (!this.startDate) {
						errMsg = '开始时间不能为空'
					}  else {
						let currTime = new Date().getTime()
						let startTime = new Date(this.startDate).getTime()
						if (startTime < currTime) {
							errMsg = '请输入有效的开始时间'
						} 
					}
					//是否有错误信息
					if(errMsg){
						this.$h.toast(errMsg)
						resolve(false)
					}
					else{
						resolve(true)
					}
				})
			},
			getEndDate(){
				this.live_times=this.live_times||30
				let times=new Date(this.startDate.replace(/-/g, "/")).getTime()
				times+=(this.live_times==30?this.live_times*60*1000:this.live_times*3600*1000)
				let date=new Date(times)
				let year=date.getFullYear()
				let month=(date.getMonth()+1).toString().padStart(2, '0')
				let day=date.getDate().toString().padStart(2, '0')
				let hour=date.getHours().toString().padStart(2, '0')
				let minutes=date.getMinutes().toString().padStart(2, '0')
				let endDate=`${year}-${month}-${day} ${hour}:${minutes}`
				return endDate
			},
			async handlePublish() {
				let res1 = await this.validateTime()
				let endDate=this.getEndDate()
				if (res1) {
					this.ruleForm.live_times=`${this.startDate}~${endDate}`
					let res2=await this.$h.utils.validateForm(this.ruleForm,this.rules)
					if(res2){
						let query={
							...this.ruleForm
						}
						let {code,msg}=await this.waitingLoading(this.$h.api.liveModel.publishLive)(query)
						
						if(code===1){
							this.$emit("change",1)
						}else{
							this.$h.toast(msg)
						}
					}
				}
			},
			normalizeStartDate(){
				let date=new Date()
				let year=date.getFullYear()
				let month=(date.getMonth()+1).toString().padStart(2, '0')
				let day=date.getDate().toString().padStart(2, '0')
				let hour=date.getHours()
				let minutes=date.getMinutes()
				if(minutes>30){
					hour=hour===23?0:hour+1
					minutes=0
				}else{
					minutes=30
				}
				hour=hour.toString().padStart(2, '0')
				minutes=minutes.toString().padStart(2, '0')
				this.startDate=`${year}-${month}-${day} ${hour}:${minutes}`
			}
		},
		created(){
			this.normalizeStartDate()
		},
	}
</script>

<style lang="scss" scoped>
	
	.title-wrap {
		@include df-row($jc: center, $ai:center, $flex:1);
		height: 95rpx;
		font: {
			size: 28rpx;
			weight: 300;
		}
		color:rgba(153, 153, 153, 1);
		.text-title{
			font-size: 28rpx;
		}
		.input-wrap {
			@include  df-row()
			padding: 20rpx 0;
			font-size: 28rpx;
		}
	}

	.live-wrap {
		width: 100%;
		height: 755rpx;
		@include df-col();

		.live-cont {
			@include df-row($jc: center, $ai:center, $flex:1);

			.cover-cont {
				width: 100%;

				.live-img {
					width: 100%;
					height: 200rpx;
				}

				@include df-col($ai:center);

				.upload-img {
					@include build-square(100rpx)
				}
			}
		}

		.btn-wrap {
			height: 80rpx;

			button {
				color: #fff;
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;

				font: {
					size: 28rpx;
					weight: 500;
				}
			}
		}
	}
</style>
